<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" value="2" index="2">

    <script>


        // 如果输入非法(不是数字或者不是正整数)   除了报错以外，还需要把正确的值显示出来(原来的)
        //  解决方案  把原来那个正确的值 以自定义属性的方式存在标签上



        var oInp = document.querySelector('input');


        // 失去焦点且发生改变  才会触发
        oInp.onchange = function () {
            var num = this.value;
            pd(num, this);
        }


        function pd(num, ele) {
            // 判断是不是数字
            if (isNaN(num)) {
                ele.value = ele.getAttribute('index');
                alert('请输入数字')
            }
            // 正整数
            else if (num < 1 || num % 1 !== 0) {
                ele.value = ele.getAttribute('index');
                alert('数量必须是正整数')
            }
            else {
                // 把index 的值更新
                ele.setAttribute('index', num);
            }
        }






        oInp.onkeydown = function (e) {
            var num = oInp.value;
            if (e.keyCode === 13) {
                // 回车确认 --- 可以让输入框失去焦点
                pd(num, this)
                this.blur();
            }
        }

    </script>

</body>

</html>